export const mapGradient = () => {
    return `


    <template>
  <div>
    <div :ref="echartsMap" id="mainChina"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, onMounted } from "vue";
import "echarts";
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
let dataList = [
  {
    name: "南海诸岛",
    value: 100,
    eventTotal: 100,
    specialImportant: 10,
    import: 10,
    compare: 10,
    common: 40,
    specail: 20,
  },
  {
    name: "海南省",
    value: 100,
    eventTotal: 100,
    specialImportant: 10,
    import: 10,
    compare: 10,
    common: 40,
    specail: 20,
  },
  {
    name: "北京市",
    value: 540,
  },
  {
    name: "天津市",
    value: 130,
  },
  {
    name: "上海市",
    value: 400,
  },
  {
    name: "重庆市",
    value: 750,
  },
  {
    name: "河北省",
    value: 130,
  },
  {
    name: "河南省",
    value: 830,
  },
  {
    name: "云南省",
    value: 110,
  },
  {
    name: "辽宁省",
    value: 19,
  },
  {
    name: "黑龙江省",
    value: 150,
  },
  {
    name: "湖南省",
    value: 690,
  },
  {
    name: "安徽省",
    value: 60,
  },
  {
    name: "山东省",
    value: 39,
  },
  {
    name: "新疆维吾尔自治区",
    value: 4,
  },
  {
    name: "江苏省",
    value: 31,
  },
  {
    name: "浙江省",
    value: 104,
  },
  {
    name: "江西省",
    value: 36,
  },
  {
    name: "湖北省",
    value: 52,
  },
  {
    name: "广西壮族自治区",
    value: 33,
  },
  {
    name: "甘肃省",
    value: 7,
  },
  {
    name: "山西省",
    value: 5,
  },
  {
    name: "内蒙古自治区",
    value: 778,
  },
  {
    name: "陕西省",
    value: 22,
  },
  {
    name: "吉林省",
    value: 4,
  },
  {
    name: "福建省",
    value: 18,
  },
  {
    name: "贵州省",
    value: 5,
  },
  {
    name: "广东省",
    value: 98,
  },
  {
    name: "青海省",
    value: 1,
  },
  {
    name: "西藏自治区",
    value: 0,
  },
  {
    name: "四川省",
    value: 44,
  },
  {
    name: "宁夏回族自治区",
    value: 4,
  },

  {
    name: "台湾省",
    value: 3,
  },
  {
    name: "香港省",
    value: 5,
  },
  {
    name: "澳门省",
    value: 555,
  },
];
let echartsMapel: any = ref("");
const echartsMap = (e: any) => (echartsMapel.value = e);
const init = (china) => {
  // 基于准备好的dom，初始化echarts实例
  echarts.registerMap("china", china as any);
  var myChart = echarts.init(echartsMapel.value);
  // 指定图表的配置项和数据
  var options: any = {
    series: [
      {
        type: "map",
        roam: true,
        zoom: 1.2,
        map: "china",
        top: 100,
        left:200,
        tooltip: {
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
          formatter: function (e, t, n) {
            let data = e.data;
            //模拟数据
            data.specialImportant = (Math.random() * 1000) | 0;
            data.import = (Math.random() * 1000) | 0;
            data.compare = (Math.random() * 1000) | 0;
            data.common = (Math.random() * 1000) | 0;
            data.specail = (Math.random() * 1000) | 0;

            let context = "<div> <p><b style='font-size:15px;'>"+data.name+"</b>(2020年第一季度)</p> ";
            return context;
          },
        },
      },
    ],

    tooltip: {
      trigger: "item",
    },

    visualMap: {
      //地图图例
      show: true,
      right:226,
      bottom:210,
      showLabel: true,
      textStyle:{
           color:"rgba(211, 228, 254, 1)",
      },
      pieces: [
        //根据数据大小，各省显示不同颜色
        {
          gte: 100,
          label: ">= 1000",
          color: "rgba(0, 110, 221, 1)",
        },
         {
          gte: 50,
          lt: 100,
          label: "500 - 999",
          color: "rgba(69, 184, 232, 1)",
        },
        {
          gte: 30,
          lt: 50,
          label: "500 - 999",
          color: "rgba(69, 155, 232, 1)",
        },
        {
          gte: 20,
          lt: 30,
          label: "100 - 499",
          color: "rgba(122, 189, 240, 1)",
        },
        {
          gte: 10,
          lt: 20,
          label: "10 - 99",
          color: "rgba(167, 218, 246, 1)",
        },
        {
          lt: 10,
          label: "<10",
          color: "rgba(211, 228, 254, 1)",
        },
      ],
    },
  };
  options.series[0]["data"] = dataList;
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(options);
};
const state = reactive({});
onMounted(() => {
  fetch("/vue.example/echarts/100000_full.json").then(function (response) {
    //response.status表示响应的http状态码
    if (response.status === 200) {
        // json是返回的response提供的一个方法,
        // 会把返回的json字符串反序列化成对象,也被包装成一个Promise了
     return response.json()
        //
    } else {
        return {};
    }
})    .then(function (data) {
        //响应的内容
        console.log(data);
         init(data);
        // 响应数据格式化
    });
 
});
</script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
  
  
    
    
  
  
    
    `;
  };
  